<!DOCTYPE html>
<html>
<head>
	<title>
		<meta charset="utf-8" />
	<!-- <meta http-equiv="refresh" content="5,https://www.zhihu.com/"> -->
	<meta name="keywords" content="html,css">
	</title>
	<link rel="stylesheet" type="text/css" href="zy.css">
</head>
<body>
	 <header>
	 	<h2 class="y">景路<h2>

  <u1 class="menu-h">

  <li>帮助</li>

  <li class="menu-i">语言
  <ul>
  <li>中文</li>
   <li>英语</li>
    <li>日文</li>
  </ul>
</li>

 </ul>
  </header>

</br></br></br></br></br></br></br>
  <div align="center">			
			<form action="" id="form1">
				<table width="600px" border="0" cellspacing="10" cellpadding="0" bgcolor="white" align="center">
					<tr align="center">
						<td>
							<h1  color="#00c1de">欢迎注册</h1>
						</td>
					</tr>
						</br></br>
							<!-- <table width="70%" border="0" cellspacing="2" align="center"> -->
								<tr align="center">	
									<td>
											<input type="text" id="username"  placeholder="设置账号名称" AUTOCOMPLETE="off"  onchange="checkUsername();" onblur="checkUsername()">

									</td>
									<td id="alertUsername" style="color:red"></td>
								</tr>
								
								<tr align="center">									
									<td ><input type="password" id="newPwd"  placeholder="设置账号密码" AUTOCOMPLETE="off" onchange="checkPwd1();" onblur="checkPwd1();"></td>	
									<td id="alertNewPwd" style="color:red">
											
									</td>		
								</tr>

								<tr align="center">									
									<td ><input type="password" id="checkPwd" placeholder="确认您的密码" AUTOCOMPLETE="off" onchange="checkPwd1();" onblur="checkPwd1();"></td>	
									<td id="alertCheckPwd" style="color:red">
											
									</td>		
								</tr>

								<tr align="center">									
									<td ><input type="text" id="phone" placeholder="填写您的手机号" AUTOCOMPLETE="off" onchange="checkPhone();" onblur="checkPhone()"></td>
									<td id="alertPhone" style="color:red">
											
									</td>
								</tr>

								<tr align="center">									
									<td ><button type="button" onclick="checkForm()">提交</button></td>

								</tr>
								<tr align="center">									
									<td ><input type="checkbox" id="hobby" value="0">我已认真阅读并同意以上条款</td>
									<td id="alertCheckbox" style="color:red">
											
									</td>
								</tr>
							
					</table>

				
			</form>
		</div>
<script type="text/javascript">
	function checkUsername(){
		var username=document.getElementById("username").value;
		if(username==null||username==""){
			document.getElementById("alertUsername").innerText= "字母、数字、汉子组合";
			return;
		}
		var reg=/^[\u4e00-\u9fa5A-Za-z0-9]*$/;
	    if (reg.test(username)){ 
	     	document.getElementById("alertUsername").innerText= "";
	    }else{
	     	alert(11);
	     	document.getElementById("alertUsername").innerText= "字母、数字、汉子组合";
	    }

	}

	function checkPwd1(){
		var username=document.getElementById("username").value;
		var newPwd=document.getElementById("newPwd").value;
		var checkPwd=document.getElementById("checkPwd").value;
		if(username==newPwd){
			document.getElementById("alertNewPwd").innerText= "密码不能与账号相同";
			return;
		}
		var len=newPwd.trim().length;
		if(len<6||len>=20){
			document.getElementById("alertNewPwd").innerText= "密码长度为6~20";
			return;
		}else{
			document.getElementById("alertNewPwd").innerText= "";
		}
		if(newPwd!=checkPwd){
			document.getElementById("alertCheckPwd").innerText="两次密码不一致";
			return;
		}else{
			document.getElementById("alertCheckPwd").innerText="";
		}
		
	}
	
	function checkPhone(){
		var phone=document.getElementById("phone").value;
		var reg=/^1(34|38)(\d{8}$)/;
		if(!reg.test(phone)){
			document.getElementById("alertPhone").innerText="手机号码错误";
			return;
		}
		document.getElementById("alertPhone").innerText="";
	}

	

	
	function checkForm(){
		checkUsername();
		checkPwd1();
		checkPhone();
		
		var checkBox=document.getElementById("hobby");
		if(checkBox.checked){
			window.location="https://baidu.com";
		}else{
			document.getElementById("alertCheckbox").innerText="请勾选复选框";
			return;
		}
		
	}

</script>
</body>
</html>